<template>
	<div class="ordernumber">
	    <div class="modal-backdrop" @click="close">
        <div class="modal"  @click.stop>
          <div class="modal-header">
                <slot name="header">
                <h3 class="title">请选择</h3>
                <div class="close" @click="close">x</div>
                </slot>
            </div>
            <div class="modal-body">
                <slot name="body">
                	<p v-show="isShow" class="tips">暂时还没有订单哟~</p>
                	<div class="store">
                		<h3 v-for="item in list" @click="shop(item)">
                			{{item}}
                		</h3>
                	</div>
                </slot>
            </div>            
        </div>
    </div>
	</div>
</template>

<script>
export default {
	name: 'ordernumber',
	props:{
	},
	data() {
		return {
			list:[],
			shopName:'',
			isShow:false
		}
	},
	created () {
		this.getShopList()
	},
	mounted() {
	   
	},
	methods: {
		//订单号接口
		getShopList () {
				this.$http.get(this.$store.state.reqUrl + '/shops/purchase/purchaseOrderSerials', {
					params:{
					   	statu:2,
					   	shopId:this.$store.state.shop_id
					}
				}).then(res => {
			   if(res.data.list.length === 0) {	
			   	  this.isShow = true
			   	  this.list = []
			    }else{
			    	this.list = res.data.list
			    }
		    })		
		},	
		//关闭模态框
		close() {
			this.$emit('close',false);
		},
		shop (item) {
			this.$emit("chooseOrder",item);
			this.$emit('close',false);
		}
	}
}
</script>

<style scoped>
	 .modal-backdrop {
	 	position: absolute;
	 	top: 0;
	 	right: 0;
	 	bottom: 0;
	 	left: 0;
	 	z-index: 88;
	 	background-color: rgba(0, 0, 0, .3);
	 	display: flex;
        justify-content: center;
        align-items: center; 
	 }
	 
	 .modal {
	 	background-color: #fff;
        box-shadow: 2px 2px 20px 1px;
        border-top-right-radius: 22px;
        border-top-left-radius: 22px;
        overflow-x:auto;
        display: flex;
        flex-direction: column;
	 	position: fixed;
	 	top: 200px;
	 	bottom: 0;
	 	left: 0;
	 	right: 0;
	 	width: 100%;
	 }
	 .modal-header {
	 	display: flex;
	 	width: 100%;
	 	height: 100px;
	 	border-bottom: 1px solid gainsboro;
	 	background: #FFFFFF;
	 	position: fixed;
	 	left: 0;
	 	z-index: 88;
	 }
	 
	 .title {
	 	flex: 1;
	 	text-align: center;
	 	line-height: 100px;
	 	font-size: 28px;
	 }
	 
	 .close {
	 	position: absolute;
	 	right: 35px;
	 	font-size: 44px;
	 	line-height: 100px;
	 	color: dimgrey;
	 }
	 
	 .modal-body {
	 	overflow-y: auto;
	 	margin-top: 120px;
	 }
	 .tips{
	 	font-size: 34px;
	 	color: darkgray;
	 	text-align: center;
	 	margin-top: 50%;
	 }
	 .store {
	 	margin-left: 15px;
	 }
	 
	 .store h3 {
	 	line-height: 60px;
	 	font-size: 28px;
	 }
</style>